<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      div {
        width: 905px;
        float: left;
        /*height:305px;
            */
      }

      ul li {
        list-style: none;
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        background: #ff0;
        color: #000;
        font-size: 20px;
        border: 1px solid #999;
        float: left;
        border-right: none;
        cursor: pointer;
      }

      .addclass {
        background: #f00;
        font-size: 25px;
        color: #00f;
        font-weight: 900;
      }

      .dian {
        float: right;
        width: 200px;
        min-height: 400px;
        border: 1px solid #999999;
      }

      .dian p {
        width: 100px;
        height: 50px;
        line-height: 50px;
      }
    </style>
  </head>
  <body>
    <div>
      <ul></ul>
    </div>

    <input type="button" value="开始点名" />
    <input type="button" value="停止" />
    <div class="dian">
      <h1>被选中的你</h1>
    </div>

    <script
      type="application/javascript"
      src="../static/plugins/jquery/jquery-3.3.1.min.js"
    ></script>
    <script type="application/javascript">
      var arr = [
        "郭强",
        "诸泽涵",
        "张利宏",
        "高海波",
        "张东升",
        "高英伟",
        "秦超蒙",
        "麦腾阳",
        "吴金正",
        "马方岩",
        "尚义鹏",
        "赵建龙",
        "李旭斌",
        "张丰",
        "金豪",
        "王银鹏",
        "温壮",
        "田利明",
        "邱国军",
        "姚志强",
        "黎怡志",
        "张崇如",
        "高帅帅",
        "谷世龙",
        "陈娜",
        "常勇",
        "杨明豪",
        "段春林",
        "丛绍谨",
        "曾佑坤",
        "洪洋",
        "王永琪",
        "王阳",
        "陈宇",
      ];

      //将数组添加到页面中
      for (var i = 0; i < arr.length; i++) {
        $("div ul").append("<li>${arr[i]}</li>");
      }

      var aLi = document.querySelectorAll("li");
      var btn = document.querySelectorAll("input");
      var timer = null;
      //开始点名
      btn[0].onclick = function () {
        clearInterval(timer);
        timer = setInterval(function () {
          var i = Math.floor(Math.random() * arr.length);
          for (var j = 0; j < aLi.length; j++) {
            aLi[j].className = "";
          }

          aLi[i].className = "addclass";
        }, 10);
      };

      //停止
      btn[1].onclick = function () {
        //清除定时器
        clearInterval(timer);

        //将选取的名字添加到div中
        var str = $("ul .addclass").text();
        var op = $("<p>" + str + "</p>");
        $(".dian").append(op);
      };
    </script>
  </body>
</html>
